<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <el-dialog @close="() => (show = false)" width="700px" v-if="show" v-loading="loading" :visible="show" title="用户组管理">
        <div class="tools">
            <el-button v-if="!showForm" @click="newHandle" type="primary" size="mini" icon="el-icon-plus">新建分组</el-button>
        </div>
        <el-divider v-if="!showForm"></el-divider>

        <user-groups :cat="cat" v-show="!showForm" ref="table" @edit="editHandle"></user-groups>
        <user-group-form v-show="showForm" ref="form" @cancle="() => (showForm = false)" @success="successHandle"
            :item="item"></user-group-form>
    </el-dialog>
</template>

<script>
import { getUserGroupList } from "@/api/user";
import UserGroups from "./UserGroups";
import UserGroupForm from "./UserGroupForm";

export default {
    components: {
        UserGroups,
        UserGroupForm,
    },
    data () {
        return {
            show: false,
            item: null,
            showForm: false,
            loading: false,
        };
    },
    props: {
        cat: { type: String, default: "broker" },
    },

    mounted: function () { },

    computed: {},

    methods: {
        successHandle: function () {
            this.showForm = false;
            this.$message.success("保存成功");
            this.$refs.table.loadData();
        },
        editHandle: function (item) {
            this.item = item;
            this.showForm = true;
        },
        newHandle: function () {
            this.item = {
                name: "",
                remark: "",
                value: "user",
            };
            this.showForm = true;
        },

        openDialog: function () {
            this.show = true;
        },
    },
};
</script>

<style scoped>
.tools {
    display: flex;
    justify-content: flex-end;
}
</style>